<template>
    <el-container class="container">
    <el-header class="container-header">
      
   
        <h2 style="line-height: 18px;">{{ bannertext[0] }}</h2>
       </el-header>
       <el-main class="container-main">
        <el-aside :class="aside" style="background-color: #fce7dd;transition: all 0.3s ease;" @click="showAside"></el-aside>
       
        <el-container>
          
            <el-main>
                <div class="article">
                    <JokeCard :joke="currentJoke" v-if="currentJoke"/>
                    <el-empty description="加载中..." v-else/>
                </div>
            </el-main>
        </el-container>
       
       </el-main>



       <!-- <el-footer class="container-footer">
           <h1>Footer</h1>
       </el-footer> -->
    
    </el-container>
</template>

<script>
import { getJoke } from './utils/jokeApi'
import JokeCard from './components/JokeCard.vue'
export default {
    name: 'Main',
    components: {
    JokeCard
  },
    data() {
        return {
            drawer: false,
            aside: 'container-main-saside',
            title: '命运的召唤',
            timer: null,
            currentJoke: null,
            bannertext:[
                "今天是2023年的第一天，希望你今天过得开心，也希望你能在未来的日子里，继续努力，不断成长，不断进步。",
                "新的一年，新的开始，新的希望，新的梦想，新的挑战，新的机遇，新的收获，新的快乐，新的幸福，新的成功，新的生活，新的一切，新年快乐！",
                "不破不立",
                "不忘初心，方得始终",]

        }
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        showAside(){
            if(this.aside === "container-main-laside") {
                this.aside = "container-main-saside";
                console.log(this.aside);
            }else{
                this.aside = "container-main-laside";
                console.log(this.aside);
            }
        },
        async fetchJoke() {
      const result = await getJoke()
      if (result) {

        this.currentJoke = result
      }
    }
    },
    created() {
    // 首次加载
    this.fetchJoke()
    
    // 设置两小时定时器
    this.timer = setInterval(() => {
      this.fetchJoke()
    }, 2 * 60 * 60 * 1000)
  },
  beforeDestroy() {
    // 清除定时器
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container-header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #a346c3;
    background: linear-gradient(to right, #a346c3, #f06d06);
    border-radius: 14px 14px 0 0;
}
.container-header h2 {
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    font-weight: 500;
}
.container-main {
    width: 100%;
    display: flex;
   padding: 0;
    background: #f0f0f0;
    .container-main-saside {
        width: 15%;
        height: 100%;
        background-color: #fce7dd;
        transition: all 0.3s ease;
    }
    .container-main-laside {
        width: 40%;
        height: 100%;
        background-color: #fce7dd;
        transition: all 0.3s ease;
    }
}
.container-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f0f0;
}
</style>